<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二级', '大强']
    var yDataArr = [99, 45, 32, 88, 87, 85, 90, 55]
    var option = {
      xAxis: {
        type: 'value' // 数值轴
      },
      yAxis: {
        type: 'category', // 类目轴
        data: xDataArr
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: {
            data: [
              {
                type: 'max',name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60,
            position: 'top'
          },
          barWidth: '30%',
          data: yDataArr
        }
      ]
    }
    // 步骤5：将配置项设置给 echarts 实例对象
    mCharts.setOption(option)
  </script>
</body>
</html>